<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ListExpert</title>

<link rel="stylesheet" type="text/css" href="../css/tablesorter/style.css"/>
<script type="text/javascript" src="../script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../script/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="../script/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        
    	getExpertData(1, 10);
    });

    function getExpertData(pageIndex, pageSize) {
        $.getJSON("ListExpert.action", {"pageIndex": pageIndex, "pageSize": pageSize},
            function(data) {
                for (var i = 0; i < data.expertList.length; i++) {
                    var strArr = new Array();
                    strArr.push('<tr>');
                    strArr.push('<td>' + data.expertList[i].expertname + '</td>');//姓名
                    strArr.push('<td>' + (data.expertList[i].sex == 0 ? '男' : '女') + '</td>');//性别
                    strArr.push('<td>' + data.expertList[i].unit + '</td>');//单位
                    strArr.push('<td>' + data.expertList[i].scienceName + '</td>');//方向
                    strArr.push('<td>' + data.expertList[i].researchName + '</td>');//研究
                    strArr.push('<td>' + data.expertList[i].tel + '<br/>' + data.expertList[i].mobile + '</td>');//电话
                    strArr.push('<td>' + data.expertList[i].email + '</td>');//电子邮件 
                    strArr.push('<td>' + data.expertList[i].addr + '<br/>' + data.expertList[i].post + '</td>');//地址 
                    strArr.push('</tr>');
                    $("#expertDataBody").append(strArr.join(''));
                }
                $("#expertDataTable").tablesorter({widthFixed: true, widgets: ['zebra']}).tablesorterPager({container: $("#pager")});
            }
        );
    }
</script>
</head>
<body>
<table id="expertDataTable" class="tablesorter" style="margin-top: 0px" width="98%" align="center" cellpadding="2" cellspacing="2">
    <thead>
        <tr>
            <th width="10%">姓名</th>
            <th width="12%">性别</th>
            <th width="12%">单位</th>
            <th width="10%">方向</th>
            <th width="8%">研究</th>
            <th width="10%">电话</th>
            <th width="8%">电子邮件</th>
            <th>地址</th>
        </tr>
    </thead>
    <tbody id="expertDataBody">
    </tbody>
</table>
<div id="pager" class="pager">
     <img src="../css/addons/pager/icons/first.png" class="first"/>
     <img src="../css/addons/pager/icons/prev.png" class="prev"/>
     <input type="text" class="pagedisplay"/>
     <img src="../css/addons/pager/icons/next.png" class="next"/>
     <img src="../css/addons/pager/icons/last.png" class="last"/>
     <select class="pagesize">
         <option selected="selected"  value="10">10</option>
         <option value="20">20</option>
         <option value="30">30</option>
         <option value="40">40</option>
     </select>
</div>
</body>
</html>